<template>
  <view class="carmileage">
    <!-- tabs -->
    <view class="tabs">
      <view
        class="item"
        :class="{ 'is-actived': activeIndex === index }"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="handleTab(index)"
      >
        {{ item.title }}
        <view v-if="item.num > 0 && activeIndex === 0" class="badge">
          {{ item.num > 999 ? '999+' : item.num }}
        </view>
      </view>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex === 0 ? '7%' : '29%' }"></view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  const props: any = defineProps({
    orderTabs: Array<any>,
  })
  // 高亮下标
  let activeIndex = ref(0)
  const handleTab = (index) => {
    activeIndex.value = index
    emits('changetab', activeIndex.value)
  }
  const emits = defineEmits(['changetab'])
</script>

<style lang="scss">
  // tabs
  .tabs {
    display: flex;
    line-height: 60rpx;
    margin-top: 2rpx;
    background-color: #fff;
    position: relative;
    z-index: 9;
    .item {
      width: 170rpx;
      text-align: left;
      padding: 20rpx 32rpx;
      font-size: 28rpx;
      color: #262626;
      position: relative;
    }
    .is-actived {
      color: #165dff;
    }
    .cursor {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 6rpx;
      padding: 0 24rpx;
      background-color: #165dff;
      /* 过渡效果 */
      transition: all 0.4s;
    }
    .badge {
      position: absolute;
      right: 12rpx;
      top: 10rpx;
      height: 32rpx;
      line-height: 32rpx;
      background: linear-gradient(222deg, #ff7a66 0%, #ff5b60 100%);
      border-radius: 40rpx 40rpx 40rpx 0;
      padding: 0 8rpx;
      font-size: 24rpx;
      font-weight: 600;
      color: #ffffff;
    }
  }
</style>
